<template>
    <div class="wrap">
        <div class="top_search">
            <div class="title">公司</div>
            <input type="text" placeholder="请输入搜索关键词" v-model="searchKeyword">
        </div>

        <div
                class="comply"
                v-for="company in filteredCompanies"
                :key="company._id"
                @click="showCompanyDetail(company._id)"
        >
            <div class="com_msg">
                <img :src="company.logoUrl || 'https://via.placeholder.com/60'" alt="公司logo">
                <div class="msg">
                    <div class="name">{{ company.title || '未命名公司' }}</div>
                    <div class="little_msg">
                        {{ company.companyType  }} |
                        {{ company.companyType  }} |
                        {{ company.companyNumber || '0' }}
                    </div>
                </div>
            </div>
            <div class="hot">
                <div class="hot_jobname">
                    热招：{{ company.workInfo?.[0]?.title || '暂无职位' }}等
                    {{ company.workInfo?.length || 0 }}个岗位 >
                </div>
            </div>
        </div>

        <div v-if="showDetail" class="modal">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="close" @click="showDetail = false">&times;</span>
                    <button @click="shoucang">收藏+</button>
                </div>

                <div class="detail_title">
                    <img :src="currentCompany.logoUrl || 'https://via.placeholder.com/60'">
                    {{ currentCompany?.title || '公司详情' }}
                </div>

                <div class="detail_msg">
                    {{ currentCompany.description || '暂无公司描述' }}
                </div>

                <div class="working_time" v-if="currentCompany.workTime?.length">
                    <div>工作时间</div>
                    {{ currentCompany.workTime.join(' ') }}
                </div>

                <template v-if="currentCompany.welfare?.length">
                    <div class="worker_goods" v-for="val in currentCompany.welfare" :key="val.title">
                        <img :src="val.img || 'https://via.placeholder.com/30'">
                        <div class="goods">
                            <div class="goods_title">{{ val.title || '福利' }}</div>
                            <div class="goods_msg">{{ val.descp || '福利详情' }}</div>
                        </div>
                    </div>
                </template>

                <div class="complyhttp" v-if="currentCompany.siteUrl">
                    <div class="txt">公司官网</div>
                    <div class="http">{{ currentCompany.siteUrl }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref, onMounted, computed } from 'vue'
    import { getcompList, getcompdetail } from "../../api/home";

    const companyList = ref([]);
    const currentCompany = ref({}); // 初始化为空对象
    const showDetail = ref(false);
    const searchKeyword = ref('');
    const selectedCompanyId = ref('');

    // 计算属性：过滤公司列表
    const filteredCompanies = computed(() => {
        if (!searchKeyword.value) return companyList.value;
        const keyword = searchKeyword.value.toLowerCase();
        return companyList.value.filter(company =>
            (company.title || '').toLowerCase().includes(keyword) ||
            (company.companyType || '').toLowerCase().includes(keyword)
        );
    });

    // 获取公司列表数据
    const fetchData = async () => {
        try {
            const res = await getcompList();
            companyList.value = res?.data?.list || [];
        } catch (err) {
            console.error('获取公司列表失败:', err);
        }
    }

    // 显示公司详情
    const showCompanyDetail = async (companyId) => {
        try {
            selectedCompanyId.value = companyId;
            const detailRes = await getcompdetail(companyId);
            currentCompany.value = detailRes?.data || {};
            showDetail.value = true;
        } catch (err) {
            console.error('获取公司详情失败:', err);
            currentCompany.value = {
                title: '详情获取失败',
                description: `错误: ${err.message || '未知错误'}`
            };
            showDetail.value = true;
        }
    }

    // 收藏功能
    const shoucang = () => {
        alert(`已收藏公司: ${currentCompany.value.title || '该公司'}`);
        // 实际项目中这里调用收藏API
    }

    // 页面加载时获取数据
    onMounted(fetchData);
</script>

<style scoped lang="less">
    .wrap {
        padding: 15px;
        position: relative;
    }

    .top_search {
        display: flex;
        align-items: center;
        margin-bottom: 20px;
        position: sticky;
        top: 0;
        background: white;
        z-index: 10;
        padding: 10px 0;

        .title {
            font-size: 18px;
            font-weight: bold;
            margin-right: 15px;
            white-space: nowrap;
        }

        input {
            flex: 1;
            padding: 10px 15px;
            border: 1px solid #ddd;
            border-radius: 25px;
            font-size: 14px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
    }

    .comply {
        background: #fff;
        border-radius: 12px;
        padding: 18px;
        margin-bottom: 15px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
    }

    .com_msg {
        display: flex;
        align-items: center;
        margin-bottom: 12px;

        img {
            width: 70px;
            height: 70px;
            border-radius: 12px;
            object-fit: cover;
            margin-right: 15px;
            border: 1px solid #f0f0f0;
            background: #f9f9f9;
        }

        .name {
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 6px;
            color: #333;
        }

        .little_msg {
            color: #666;
            font-size: 13px;
            line-height: 1.4;
        }
    }

    .hot {
        padding-top: 12px;
        border-top: 1px dashed #eee;

        .hot_jobname {
            color: #e67e22;
            font-size: 14px;
            font-weight: 500;
            display: flex;
            align-items: center;
        }
    }

    /* 模态框样式 */
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        backdrop-filter: blur(3px);
    }

    .modal-content {
        background: white;
        padding: 25px;
        border-radius: 16px;
        width: 90%;
        max-width: 600px;
        max-height: 85vh;
        overflow-y: auto;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        position: relative;
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #eee;

        .close {
            font-size: 28px;
            cursor: pointer;
            color: #999;
            transition: color 0.2s;
            line-height: 1;

            &:hover {
                color: #333;
            }
        }

        button {
            background: linear-gradient(135deg, #ff9a9e, #fad0c4);
            border: none;
            padding: 8px 16px;
            border-radius: 20px;
            cursor: pointer;
            color: white;
            font-weight: 500;
            box-shadow: 0 3px 8px rgba(255, 154, 158, 0.3);
            transition: all 0.3s;

            &:hover {
                transform: translateY(-2px);
                box-shadow: 0 5px 12px rgba(255, 154, 158, 0.4);
            }
        }
    }

    .detail_title {
        display: flex;
        align-items: center;
        font-size: 22px;
        font-weight: bold;
        margin-bottom: 20px;
        color: #2c3e50;

        img {
            width: 80px;
            height: 80px;
            border-radius: 12px;
            object-fit: cover;
            margin-right: 20px;
            border: 1px solid #eee;
            box-shadow: 0 3px 8px rgba(0,0,0,0.1);
        }
    }

    .detail_msg {
        overflow: hidden; /* 隐藏超出部分 */
        text-overflow: ellipsis; /* 超出部分显示省略号 */
        display: -webkit-box; /* 使用 Webkit 的 box 模型 */
        -webkit-line-clamp: 2; /* 限制显示两行 */
        -webkit-box-orient: vertical; /* 垂直排列内容 */
        line-height: 1.7;
        color: #555;
        margin-bottom: 25px;
        padding: 15px;
        background: #f9f9f9;
        border-radius: 10px;
        border-left: 4px solid #4e54c8;
    }

    .working_time {
        background: #e8f4ff;
        padding: 15px;
        border-radius: 10px;
        margin-bottom: 20px;
        font-size: 15px;

        > div {
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 8px;
            font-size: 16px;
        }
    }

    .worker_goods {
        display: flex;
        align-items: flex-start;
        margin-bottom: 18px;
        padding: 12px;
        border-radius: 10px;
        background: #f8f9fa;
        transition: all 0.3s;

        &:hover {
            background: #edf2ff;
            transform: translateX(5px);
        }

        img {
            width: 40px;
            height: 40px;
            margin-right: 15px;
            object-fit: contain;
        }

        .goods_title {
            font-weight: 600;
            color: #3498db;
            margin-bottom: 5px;
        }

        .goods_msg {
            color: #666;
            font-size: 14px;
            line-height: 1.5;
        }
    }

    .complyhttp {
        margin-top: 25px;
        padding-top: 20px;
        border-top: 1px solid #eee;

        .txt {
            font-weight: bold;
            margin-bottom: 8px;
            color: #2c3e50;
        }

        .http {
            color: #3498db;
            word-break: break-all;
            font-size: 15px;
        }
    }
</style>